<template>
  <view>
    <PublicPage pageName="精选供货" :borderType="true">
      <view class="select_layout_box">
        <view class="head_con_box">
          <image class="head_img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/inviteToHelpSell_two.png" alt="">
        </view>
        <view class="referee_box">
          <image class="communityLogo_img" :src="selectedSupplyData.communityLogo || 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/avatar2_icon.png'" alt="">{{selectedSupplyData.communityName || "XX"}} 为你精选以下供货
        </view>
        <scroll-view scroll-y class="scrollList_box">
          <view class="supply_user_box" v-for="(supply,supplyIndex) in selectedSupplyList" :key="supplyIndex" @click="choiceSupplyFn(supply)">
            <view class="choice_box">
              <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/yuanxing3_icon.png" class="yuanxing_box" v-if="[2,3].includes(supply.helpSellStatus)"></image>
              <text class="iconfont icon-checkbox_fill fz-16 themeFontColor" v-if="supplyIdList.includes(supply.groupAccountId)&&supply.helpSellStatus==1"></text>
              <text class="iconfont icon-checkbox fz-16 viceColorN8" v-if="!supplyIdList.includes(supply.groupAccountId)&&supply.helpSellStatus==1"></text>
            </view>
            <view class="avatar_box u-m-r-16">
              <image class="avatar_image" :src="supply.groupAvatar || 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/avatar2_icon.png'" mode="aspectFill" alt="">
            </view>
            <view class="user_msg_box">
              <view class="user_name_box linh-20">
                <text class="user_name">{{supply.groupNickname}}</text>
                <text class="helpSellStatus_box themeFontColor" v-if="supply.helpSellStatus==3">已成为帮卖团长</text>
                <text class="helpSellStatus_box viceColorN9" v-if="supply.helpSellStatus==2">待成为帮卖团长</text>
              </view>
              <view class="user_data_box viceColor fz-12 linh-16">
                <text>
                  帮卖团长:
                  <text class="themeFontColor u-m-l-10">{{playvolumeFn(supply.headCount) || 0}}人</text>
                </text>
                <text class="u-m-l-24">
                  发放佣金:
                  <text class="themeFontColor u-m-l-10">{{playvolumeFn(supply.giveCommission) || 0}}元</text>
                </text>
              </view>
              <view class="user_data_box viceColor fz-12 linh-16">
                <text>
                  累计销量:
                  <text class="themeFontColor u-m-l-10">{{playvolumeFn(supply.saleCount) || 0}}件</text>
                </text>
              </view>
            </view>
          </view>
          <DefaultPage v-if="showDefaultPage" :minusHeight="0" :type="2" tips="暂无可帮卖的" />
        </scroll-view>
        <view class="foot_box">
          <view class="foot_box_l" v-if="optionalIdArr.length<1">
            <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/yuanxing3_icon.png" class="yuanxing_box" v-if="optionalIdArr.length<1"></image>
            <text class="viceColorN4">全选</text>
          </view>
          <view class="foot_box_l" v-if="(optionalIdArr.length == supplyIdList.length)&&optionalIdArr.length>0" @click="selectAllFn(0)">
            <text class="iconfont icon-checkbox_fill fz-16 u-m-r-10 themeFontColor"></text>
            取消全选
          </view>
          <view class="foot_box_l" v-if="(optionalIdArr.length != supplyIdList.length)&&optionalIdArr.length>0" @click="selectAllFn(1)">
            <text class="iconfont icon-checkbox fz-16 viceColorN8 u-m-r-10" v-if="(optionalIdArr.length != supplyIdList.length)&&optionalIdArr.length>0"></text>
            全选
          </view>
          <view class="foot_box_r" @click.stop="onekeyFn"><button class="red_btn" :class="{'di_onekey_box':onekeyDisabled}" :disabled="onekeyDisabled">一键申请帮卖({{supplyIdList.length}}/{{selectedSupplyList.length}})</button></view>
        </view>
      </view>
    </PublicPage>
  </view>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'
import ScrollList from '@/components/scrollList/index.vue'

import helpSellApi from '@/api/helpSellGroups.js'
import Util from "@/api/util.js"
export default {
  components: {
    PublicPage,
    DefaultPage,
    ScrollList
  },
  data () {
    return {
      routeData: {}, //路由参数
      selectedSupplyList: [], // 精选供货列表
      selectedSupplyData: {}, // 页面数据
      supplyIdList: [], // 选择的ID
      onekeyDisabled: true, // 禁止提交
      optionalIdArr: [], //可以选择的供货id集合为了方便处理一些数据逻辑
      showDefaultPage: false,
    }
  },
  onLoad (r) {
    this.routeData = r
  },
  onShow () {
    if (this.routeData.recommendGroupLogId) this.getShareGroupListFn()
  },
  methods: {
    // 一键申请帮卖
    onekeyFn () {
      this.onekeyDisabled = true
      helpSellApi.batchApplyBeHead({groupAccountIdList: this.supplyIdList, recommendCode: this.routeData.recommendCode}).then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: '申请成功',
            icon: 'none'
          })
          //遍历选中数组更新数据
          let supplyArr = this.selectedSupplyList
          this.supplyIdList.forEach((item,i)=>{
            supplyArr.forEach((sup,j)=>{
              if (item == sup.groupAccountId) {
                this.selectedSupplyList[j] = {
                  ...this.selectedSupplyList[j],
                  helpSellStatus: sup.isHelpSellExamine==0?3:2, // isHelpSellExamine是否开启帮卖审核0不开启1开启
                  headCount: sup.isHelpSellExamine==0?Number(sup.headCount)+1:sup.headCount, // 未开启帮卖审核，团长数量加1
                }
              }
            })
          })
          this.supplyIdList = []
          this.optionalIdArr = [] // 把可以全选的数据也初始化下在获取新的可选id
          this.selectedSupplyList.forEach((item,i)=>{
            if (item.helpSellStatus==1) this.optionalIdArr.push(item.groupAccountId)
          })
        } else {
          this.onekeyDisabled = false
        }
      })
    },
    // 全选取消全选
    selectAllFn (type) { // 0取消全选 1全选
      this.supplyIdList = type==1?JSON.parse(JSON.stringify(this.optionalIdArr)):[]
      this.onekeyDisabled = this.supplyIdList.length>0?false:true
    },
    // 选择供货
    choiceSupplyFn (item) {
      if (item.helpSellStatus == 1) { // 只有等于1是待申请的才可以选择
        this.supplyIdList = Util.selectArr(item.groupAccountId, this.supplyIdList)
        this.onekeyDisabled = this.supplyIdList.length>0?false:true
      }
    },
    playvolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
    // 获取精选供货列表
    getShareGroupListFn() {
      helpSellApi.getShareGroupList({recommendGroupLogId: this.routeData.recommendGroupLogId, recommendCode: this.routeData.recommendCode}).then(res => {
        this.selectedSupplyData = res.data
        this.selectedSupplyList = res.data.recommendBonusGroupListRespVOList || []
        this.selectedSupplyList.forEach((item,i)=>{
          if (item.helpSellStatus==1) this.optionalIdArr.push(item.groupAccountId)
        })
        this.showDefaultPage = this.selectedSupplyList.length>0?false:true
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.select_layout_box {
  position: relative;
  width: 100%;
  height: 100%;
  .head_con_box {
    width: 100%;
    height: 320rpx;
    .head_img_box {
      width: 100%;
      height: 100%;
    }
  }
  .referee_box {
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: inset 0rpx -2rpx 0rpx #EBEDF0;
    .communityLogo_img {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }
  }
  .scrollList_box {
    width: 100%;
    height: calc(100% - 540rpx);
    .supply_user_box {
      background: #fff;
      display: flex;
      align-items: center;
      flex: 1;
      padding: 24rpx 32rpx;
      .choice_box {
        flex: 0 0 auto;
        padding: 20rpx 20rpx 20rpx 0;
        .yuanxing_box {
          width: 32rpx;
          height: 32rpx;
        }
      }
      .avatar_box {
        flex: 0 0 auto;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        overflow: hidden;
        .avatar_image {
          width: 100%;
          height: 100%;
          margin-right: 16rpx;
        }
      }
      .user_msg_box {
        .user_name_box {
          display: flex;
          align-items: center;
          flex: 1;
          width: 100%;
          .user_name {
            max-width: 380rpx;
            height: 40rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap !important;
          }
          .helpSellStatus_box {
            flex: 0 0 auto;
            margin-left: 16rpx;
            font-size: 24rpx;
          }
          .scale_box {
            flex: 0 0 auto;
            margin-left: 16rpx;
            font-size: 20rpx;
            color: #B57A43;
            padding: 0 8rpx;
            line-height: 32rpx;
            background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);
            border-radius: 4rpx;
          }
        }
      }
    }
  }
  .foot_box {
    width: 100%;
    height: 100rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 0 32rpx;
    .foot_box_l {
      display: flex;
      align-items: center;
      .yuanxing_box {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
    .foot_box_r {
      .red_btn {
        width: 470rpx;
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        color: #fff;
        &.di_onekey_box {
          background: #FFE5DE;
        }
      }
    }
  }
}
</style>